
<template>
<div >
    <!-- 登录背景
    <div class="background">
      <img :src="imgSrc" width="100%" height="100%" alt="" />
    </div> -->

    <div style="position:absolute;left:200px;top:230px;width:1500px;">
        <div >
            <h1>欢迎使用手机登录</h1>

        </div>
        <div>
            <el-form ref="form" class="form-input"  > 
                
                <el-form-item >
                    <el-input v-model="user.phone" placeholder="请输入登录的手机号" clearable @blur="tel()"></el-input>
                </el-form-item>
                {{message}}    
                <el-form-item>
                    <el-input v-model="user.password" placeholder="请输入登录密码" show-password></el-input> 
                </el-form-item> 

            </el-form>
            <!-- <el-button @click="log()">log</el-button> -->
        </div>
        <div >
            <el-button  @click="login()">确定登录</el-button>
            <el-button  @click="loginEmail()">邮箱登录</el-button>
            <el-button  @click="register()">注册</el-button>
        </div>
    </div>
</div>
</template>

<script>
import stores from '@/store'
export default {
    data() {
        return {
            ruleTel:0,
            message:'',
            // imgSrc:require('../../assets/bgd.jpg'),
            user:{  
                id:'',
                name:'',
                phone:'',
                email:'',
                password:'',  

            },
        }
    },
    methods: {
      login(){
          //处理账号密码为空·
          if(this.user.phone==''||this.user.password==''){
              //alert("账号密码不能为空")
                this.$alert('账号密码不能为空', '登录失败', {
                confirmButtonText: '知道了，马上去填写',})
          }
          else if(this.ruleTel==1){
              this.$alert( '请输入正确的手机号', {confirmButtonText: '知道了',})
          }
          else{
              //账号密码不为空,使用手机号登录
            this.$axios.post(stores.url+'/login',this.user)
            .then(res=>{
                
                console.log(res.data);
                //登陆成功
                if(res.data.code==2000){
                    console.log(res.data.data.user);
                    sessionStorage.setItem("account",res.data.data.user.account);
                    sessionStorage.setItem("nickname",res.data.data.user.nickName);
                    this.$router.push('/home');
                }
                else if(res.data.code==2001){
                    //处理登陆失败
                    this.$alert('没有该用户喔', {
                    confirmButtonText: '知道了',})                   
                }
                else if(res.data.code==2002){
                    this.$alert('账号或者密码错误', {
                    confirmButtonText: '知道了',})  
                }
            });
          }
        
        },
        //手机的验证规则
        tel(){
            var verify1=(/^1[3456789]\d{9}$/)//手机号
            if (verify1.test(this.user.phone)||this.user.phone=='') {
                    this.message = ''
                     this.ruleTel=0;
                    
            } else {
                    this.message = '请输入正确手机号'
                    this.ruleTel=1;
            }
        },
        //注册
        register(){
            this.$router.push('/register');
        },
        loginEmail(){
            this.$router.push('/loginEmail')
        },
        log(){
            window.sessionStorage.getItem('username')
        }
    },
    created () {
       console.log("haha")
        this.$axios.post('http://localhost:8083/test3',"function1")
            .then(res=>{
                console.log(res)
                
            })       
    }

};
    
</script>
<style scoped>
.form-input{
    width: 16%;
    margin: auto;
}
.background{
    width:100%;  
    height:100%;  /**宽高100%是为了图片铺满屏幕 */
    z-index:-1;
    position: absolute;
}
</style>